<template>
	<view class="wrap">
		<u-form :border-bottom="false" :model="form" ref="articleForm">
			<u-form-item :border-bottom="false" label-position="top" label="标题" prop="title">
				<u-input :border="true" v-model="form.title" />
			</u-form-item>
			<u-form-item :border-bottom="false" label-position="top" label="内容" prop="content">
				<u-input type="textarea" :border="true" height="200" v-model="form.content" />
			</u-form-item>
			<u-form-item :border-bottom="false" label-position="top" label="上传图片" prop="photo" label-width="150">
				<u-upload :action="action" width="160" height="160" ref="uUpload"></u-upload>
			</u-form-item>
		</u-form>
		<u-button class="submit-button" shape="circle" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: '',
					content: '',
					photo: ''
				},
				action: 'http://www.example.com',
				rules: {
					title: [
						{ 
							required: true, 
							message: '请输入标题', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					content: [
						{
							min: 5, 
							message: '内容不能少于5个字', 
							trigger: 'change'
						}
					],
					photo: [
						{
							required: true, 
							message: '请上传图片', 
							trigger: 'change'
						}
					]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.articleForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.articleForm.setRules(this.rules);
			this.form.photo = this.$refs.uUpload.lists;
		}
	}
</script>

<style>
.wrap {
	padding: 30rpx;
	background-color: #f0f0f0;
	border-radius: 10rpx;
}

.submit-button {
	margin-top: 50rpx;
	color: #FFFFFF;
	background-color: #d81e06;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 23rpx;
	cursor: pointer;
}

.u-form-item {
	margin-bottom: 20rpx;
}

label {
	font-weight: bold;
}

.u-input {
	width: 100%;
	border: 1rpx solid #ccc;
	border-radius: 4rpx;
	padding: 10rpx;
	font-size: 28rpx;
}

.u-input[type="textarea"] {
	height: 200rpx;
}

.u-upload {
	width: 160rpx;
	height: 160rpx;
	border: 2rpx dashed #ccc;
	border-radius: 6rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.u-upload:hover {
	border-color: #d81e06;
}

.u-button {
	background-color: #d81e06;
	color: #FFFFFF;
	border: none;
	border-radius: 4rpx;
	padding: 10rpx 20rpx;
	font-size: 28rpx;
	cursor: pointer;
}

.u-button:hover {
	background-color: #a31500;
}

@media (max-width: 768px) {
	.wrap {
		padding: 20rpx;
	}

	.u-input {
		font-size: 24rpx;
	}

	.submit-button {
		margin-top: 20rpx;
		font-size: 20rpx;
		width: 100px;
		height: 100px;
	}
}
</style>
